<!-- DraggableList.vue -->
<template>
  <view class="wrap-model">
    <view class="c-titls"> 模塊庫 </view>
    <view class="search">
      <u-search
        placeholder="輸入模塊名稱"
        v-model="form_template_module_name"
        :showAction="false"
        @search="toSearch"
      ></u-search>
    </view>
    <view class="draggable-list">
      <view
        v-for="(item, index) in fragementList"
        :key="index"
        class="draggable-item"
        draggable="true"
        :id="item.type"
        @dragstart="onDragStart(item)"
      >
        <view class="text">
          {{ item.form_template_module_name }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getModuleList } from '@/api/template.js'
export default {
  name: 'DraggableList',
  data() {
    return {
      fragementList: [],
      form_template_module_name: '',
    }
  },
  mounted() {
    console.log('onLoad')
			this.$nextTick(() => {
				this.getModuleList();
			});
		},
  methods: {
    onDragStart(component) {
      this.$emit('setModleTarget', component)
    },
    // 模版片段
    getModuleList() {
      let params = {
        uid: uni.getStorageSync('uid'),
        form_template_module_name: this.form_template_module_name,
        pageNo: 1,
        pageSize: 99999,
      }
      getModuleList(params).then((res) => {
        this.fragementList= res || []
      })
    },
    toSearch() {
      this.getModuleList()
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap-model {
  padding: 24rpx;

  .c-titls {
    margin-bottom: 24rpx;
  }
}
.draggable-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-height: 800rpx;
  overflow-y: auto;
  gap: 24rpx;
}

.draggable-item {
  width: 300rpx;
  height: 92rpx;
  line-height: 92rpx;
  background: #fff;
  cursor: grab;
  padding: 12rpx;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #e7e7e7;
  display: flex;
  align-items: center;
  justify-content: center;
  .text {
    margin-left: 12rpx;
    //超出...
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
::v-deep.u-image {
  margin-bottom: 44rpx;
}
.search {
  margin-bottom: 24rpx;
}
</style>
